<template>
    <div class="default-main ba-table-box">
        <div class="table-com-search">
                <div class="query-form">
                    <!-- 第一行 -->
                    <div class="form-item">
                    <label>ID</label>
                        <el-input v-model="id" placeholder="ID" />
                    </div>
                    <div class="form-item">
                    <label>细目</label>
                     <el-input v-model="item" placeholder="细目" />
                    </div>
                    <div class="form-item">
                    <label>上传管理员</label>
                     <el-input v-model="admin" placeholder="上传管理员" />
                    </div>
                    <div class="form-item">
                        <el-button v-blur  type="primary">搜索</el-button>
                        <el-button @click="onResetForm()">重置</el-button>
                    </div>
                </div>
                
        </div>
        <div class="table-header ba-scroll-style">
             <el-tooltip  content="刷新" placement="top">
                <el-button v-blur @click="onAction('refresh', { loading: true })" color="#40485b" class="table-header-operate" type="info">
                    <Icon name="fa fa-refresh" />
                </el-button>
            </el-tooltip>
            <el-tooltip  content="添加" placement="top">
                <el-button v-blur @click="onAction('add')" class="table-header-operate" type="primary">
                    <Icon name="fa fa-plus" />
                    <span class="table-header-operate-text">添加</span>
                </el-button>
            </el-tooltip>
            <!-- <el-tooltip  content="编辑" placement="top">
                <el-button v-blur @click="onAction('edit')" :disabled="true" class="table-header-operate" type="primary">
                    <Icon name="fa fa-pencil" />
                    <span class="table-header-operate-text">编辑</span>
                </el-button>
            </el-tooltip>
            <el-tooltip  content="删除" placement="top">
                <el-button v-blur @click="onAction('delete')" :disabled="true" class="table-header-operate" type="danger">
                    <Icon name="fa fa-trash" />
                    <span class="table-header-operate-text">删除</span>
                </el-button>
            </el-tooltip> -->
        </div>
        <div >
            <el-table :data="tableData" style="width: 100%"
                class="ba-data-table w100"
                header-cell-class-name="table-header-cell"       
               >
                <el-table-column type="selection" width="55" />
                <el-table-column label="Date" width="120">
                    <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>
                <el-table-column property="name" label="Name" width="120" />
                <el-table-column
                property="address"
                label="use show-overflow-tooltip"
                width="240"
                show-overflow-tooltip
                />
                <el-table-column property="address" label="address" />
            </el-table> 
            
            <div class="table-pagination">
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    layout="sizes, total, ->, prev, pager, next, jumper"
                    :total="400">
                </el-pagination>
             </div>
        </div>
    </div>

    
</template>

<script>
    export default {
        data() {
            return {
               tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }
               ],
               page: 1,
               pageSize: 10,
            }
        },
        methods: {
            handleSizeChange(val) {
                this.pageSize = val
            },
            handleCurrentChange(val) {
                this.page = val
            },
            onAction() {
               
            }
        }
    }
</script>

<style scoped lang="scss">
    .ba-data-table :deep(.el-button + .el-button) {
    margin-left: 6px;
}
.ba-data-table :deep(.table-header-cell) .cell {
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.table-pagination {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    padding: 13px 15px;
}
 .table-header {
    position: relative;
    overflow-x: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
    .table-header-operate-text {
        margin-left: 6px;
    }
}

.mlr-12 {
    margin-left: 12px;
}
.mlr-12 + .el-button {
    margin-left: 12px;
}
.table-search {
    display: flex;
    margin-left: auto;
    .quick-search {
        width: auto;
    }
}
.table-search-button-group {
    display: flex;
    margin-left: 12px;
    border: 1px solid var(--el-border-color);
    border-radius: var(--el-border-radius-base);
    overflow: hidden;
    button:focus,
    button:active {
        background-color: var(--ba-bg-color-overlay);
    }
    button:hover {
        background-color: var(--el-color-info-light-7);
    }
    .table-search-button-item {
        height: 30px;
        border: none;
        border-radius: 0;
    }
    .el-button + .el-button {
        margin: 0;
    }
    .right-border {
        border-right: 1px solid var(--el-border-color);
    }
}

html.dark {
    .table-search-button-group {
        button:focus,
        button:active {
            background-color: var(--el-color-info-dark-2);
        }
        button:hover {
            background-color: var(--el-color-info-light-7);
        }
        button {
            background-color: var(--ba-bg-color-overlay);
            el-icon {
                color: white !important;
            }
        }
    }
}
.table-com-search {
   box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
}
 .query-form {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 15px;
    }
    .form-item {
      display: flex;
      align-items: center;
      width: 23%;
    }
    .form-item label {
      width: 120px;
      margin-right: 8px;
      text-align: right;
      color: rgb(96, 98, 102);
    }
</style>
